﻿﻿
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通讯1</title>
</head>
<body>
    <p><b>用户：<span id="uid"></span></b></p>
    <div>消息： <input type="text" value="" id="msg"><input type="button" value="广播（给所有人发消息）" id="btnSend"></div>
    <div>
        <hr>
        <p>指定id： <input type="text" value="" id="userid"></p>
        <p>消息： <input type="text" value="" id="useridmsg"></p>
        <p><input type="button" value="一对一聊天" id="btnOneSend"></p>
    </div>
    <div>
        <hr>
        <p>群： <input type="text" value="" id="groupname"><input type="button" value="加入群" id="btnAddGroup"><input type="button" value="退群" id="btnDelGroup"></p>
        <p>群消息： <input type="text" value="" id="groupmsg"><input type="button" value="群聊" id="btnGroupMsg"></p>
    </div> 
    <hr>
    <ul id="msglist">
        <li></li>
    </ul>
</body>
</html>
<script src="../js/jquery.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/signalr.js"></script>
<script src="../js/signalr.min.js"></script>
<script>
    var connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:5208/Hubs")
        .build();
    //当连接成功的时候
    connection.start().then(function () {
        $("#uid").html(connection.connectionId);
        console.log("客户端连接成功")
    })

    //接受服务端主动推送过来的消息
    connection.on("ReceiveMsg", function (msg) {
        $("#msglist").append("<li>"+msg+"</li>");
    })
    //接受服务端主动推送过来的消息
    connection.on("ReceiveToUserMsg", function (msg) {
        $("#msglist").append("<li>" + msg + "</li>");
    })
    connection.on("SendGroup", function (msg) {
        $("#msglist").append("<li>" + msg + "</li>");
    })




    $('#btnSend').click(function () {
        connection.invoke("SendMsg", 1, $("#msg").val()).catch(function (err) {
            console.log(err);
        });
    })
    $('#btnOneSend').click(function () {
        connection.invoke("SendMessageToUser", $("#userid").val(), $("#useridmsg").val()).catch(function (err) {
            console.log(err);
        });
    })
    $('#btnAddGroup').click(function () {
        connection.invoke("AddToGroup",   $("#groupname").val()).catch(function (err) {
            console.log(err);
        });
    })
    $('#btnDelGroup').click(function () {
        connection.invoke("RemoveFromGroup", $("#groupname").val()).catch(function (err) {
            console.log(err);
        });
    })
    $('#btnGroupMsg').click(function () {
        connection.invoke("SendGroupMsg", $("#groupname").val(), $("#groupmsg").val()).catch(function (err) {
            console.log(err);
        });
    })
    
</script>